@import "common/reset";
@import "common/common";

.web{
    //轮播
    .slider{
        position: relative;       
        ul{
            margin: auto;
            max-width: 1920px;
            width: 100%;
            li{
                float: left;
                position: absolute;
                img{
                    display: block;
                    display: block;
                    width: 100%;
                    height: auto;
                    opacity: 0;
                    transition: all 2.5s ease-in-out; 
                }
            }
        }
    }
    //简介
    .company-jianjie{
        padding: 20px 36px 70px 36px;
        .company-left{
            float: left;
        }
        .padd-b{
            padding-bottom: 20px;
        }
        .border-r{
            border-radius: 15px;
        }
        .padd-r{
            padding-right: 16px;
        }
        .company-right{
            float: right;
            font-family: "方正兰亭粗黑简体";
            font-size: 16px;
            color: #221815;
            line-height: 32px;
            position: relative;
            p{
                width: 518px;
                text-indent: 2rem;
                text-align: justify;
            }
            span{                
                position: absolute;
                bottom: 0;
                right: 0;                            
                a{
                    color: #fff;
                    display: block;                   
                }               
            }
        }
    }
    //按钮
    .btn{
        font-size: 18px;
        background: $z-color;
        padding: 2px 10px;
        border-radius: 8px;  
        a:hover{
            text-decoration: underline;
        }
    }
    //品牌展示
    .brand-show{
        padding: 20px 0 70px;
        background: url(../img/index/config_bg.jpg) no-repeat center center;
        .brand{
            position: relative;
            text-align: center;
            width: 330px;
            height: 440px;  
            cursor: pointer;    
            .brand-img{
                height: 206px;
                position: relative;
                border-bottom: 4px solid $z-color;
                .all{
                    height: 100%;
                    width: 100%;
                }
                 .brand-logo{ 
                    position: absolute; 
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: -40px;              
                    width: 84px;
                    height: 84px;
                    border-radius: 50%;
                    background: #fff;
                    text-align: center;
                    line-height: 74px;
                    border:4px solid $z-color;
                    img{
                        vertical-align: middle;
                    }
                }
            } 
            .brand-detail{
                transition: all 1s ease-in-out; 
                height: 230px;
                padding-top: 54px;                
                .brand-title{
                    font-size: 20px;
                    font-family: "方正正大黑简体";
                    line-height: 32px;
                }
                .brand-luoma{
                    color:#87283d;                  
                }
                .brand-meixi{
                    color: #aace36;
                }
                .brand-bisa{
                    color:#e8e500;
                }
                .brand-mjj{
                    color: #da262c;
                }
                .brand-lpbs{
                    color: #821b1f;
                }
                p{
                    color: $t-color; 
                    font-family: "方正兰亭黑_GBK(TT)";
                    font-size: 16px;
                    line-height: 24px;
                }  
                .btn{
                    line-height: 1;
                    display: inline-block;
                    position: absolute;
                    bottom: 21px;
                    transform: translateX(-50%);
                    left: 50%;
                    a{
                        color: #fff;
                        font-size: 14px;
                    }
                } 
            }
                   
        }
        .brand:hover>.brand-detail{
            background: rgba(0,0,0,.2);
        }
        .brand-left{
            float: left;
        }
        .brand-right{
            float: right;
        }
        .brand-middle{
            margin: auto;
        }
        .brand-x{
            width: 780px;
            padding-top: 50px;
            margin: auto;
        }        
    }
    .config-img{
        height: 273px;
        text-align: center;
        font-family: "方正正大黑简体";
        background: url(../img/index/center_title.jpg) no-repeat center center;
        color: #fff;
        .config-text{
            padding-top: 70px;
            h2{
                font-size: 48px;           
            }
            p{
                font-size: 24px;
            }
        }
        
    }
    //加盟案例
    .join-case{
        padding: 30px 0 70px 0;
        #join-photos{
            height: 620px;
            overflow: hidden;
            margin: 0 auto;
            white-space: nowrap;
            #join-scroll{                     
                li{
                    cursor: pointer; 
                    vertical-align: top;
                    font-family: "微软雅黑";
                    color: $z-color;
                    font-size: 17px;
                    text-align: center;
                    display: inline-block;
//                  float: left;
                    margin-right: 22px;
                    .img{
                        width: 394px;
                        height: 554px;
                    }
                    .join-detail{
                        padding-top: 10px;
                        p{
                            line-height: 24px;
                        }
                    }
                    
                }
            }
        }
    }
}
